test(specimens): add reviewable viewport receipts - #2
Open
BunsDev wants to merge 76 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
BunsDev
force-pushed
the
test/specimen-visual-review
branch
from
August 27, 2026 10:11
b42b50e to
c3337ce
Compare
There was a problem hiding this comment.
Pull request overview
This PR adds a dependency-free, Chrome DevTools Protocol–driven visual review lane for the specimens app so viewport receipts (PNGs + summaries) can be captured and reviewed durably in CI, instead of relying on manual spot-checks.
Changes:
- Introduces a CDP-based renderer (
scripts/visual-review.mjs) that captures scenario screenshots and validates key layout/runtime invariants. - Adds a stricter mobile-quality matrix runner (
scripts/mobile-quality-review.mjs) to validate overflow, tab target sizing, RTL, reduced motion, and 200% root text scaling. - Adds a dedicated GitHub Actions workflow to run and upload the visual/mobile-quality artifacts, plus documentation and additional responsive guards/contracts.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
.github/workflows/visual-review.yml |
Adds CI job to build/preview specimens, run both review scripts, and upload artifacts. |
apps/specimens/src/specimens-fixes.css |
Adds additional mobile overflow/containment CSS guards to support reliable viewport receipts. |
handoffs/visual-review.md |
Documents what the workflow validates, how to run it locally, and review expectations. |
scripts/mobile-quality-review.mjs |
New mobile matrix runner validating overflow, targets, RTL, reduced motion, and text scaling; captures PNGs and summaries. |
scripts/verify-contracts.mjs |
Extends contract verification to assert minmax(0, 1fr) responsive grid flooring guards are present. |
scripts/visual-review.mjs |
New CDP-based screenshot + invariant checker for library and assembled scenarios; emits receipts and summaries. |
Suppressed comments (1)
scripts/mobile-quality-review.mjs:375
- The PR description/handoff mentions Chrome diagnostics on failure, but this script never writes a Chrome log when an error occurs. Since stdout/stderr are already being collected (see earlier comment), add a catch block to persist chrome.log before rethrowing so failures are diagnosable from artifacts.
} finally {
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+58
to
+69
|
|
||
| const chrome = spawn(chromePath, [ | ||
| "--headless=new", | ||
| "--no-sandbox", | ||
| "--disable-dev-shm-usage", | ||
| "--disable-gpu", | ||
| "--hide-scrollbars", | ||
| `--remote-debugging-port=${port}`, | ||
| `--user-data-dir=${profile}`, | ||
| "about:blank", | ||
| ]); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Objective
Make specimen-browser visual changes reviewable through durable viewport receipts rather than an unrecorded manual spot-check.
This PR is stacked on #1 and should merge after it.
What changed
SessionHeaderandTranscriptTurnremain contained and that mobile session titles are not ellipsizedDeliberate non-goals
Verification
Final head:
a250e451b8181e2b1b623f9bc48eed8f0e1b0ca3CI— successVisual review— successPassing browser scenarios:
Passing mobile-quality scenarios:
The 200% text scenario reports zero document, card, stage, tab-root, transcript, and session-header overflow; tab targets remain at least 44px, reduced motion is active, and the session title remains visible without ellipsis.
Final file set
.github/workflows/visual-review.ymlapps/specimens/src/specimens-fixes.csshandoffs/visual-review.mdscripts/mobile-quality-review.mjsscripts/verify-contracts.mjsscripts/visual-review.mjsRisk and rollback
The workflow is additive and dependency-free. It exercises the built specimen app without changing package runtime behavior. Revert this PR to remove the hosted receipt lane and its focused mobile-quality guards.